<script setup lang="ts">
import {
  ElButton,
  ElCard,
  ElDivider,
  ElImage,
  ElLink,
  ElSkeleton,
  ElSpace,
} from "element-plus";
import { useRoute } from "vue-router";

import ApiMerchant from "@/api/merchant";
import ByDescription from "@/components/common/ByDescription.vue";
import ByDescriptionItem from "@/components/common/ByDescriptionItem.vue";

import { splitImageStr } from "@/utils";
import useCategory from "@/hooks/useCategory";
import useRequest from "@/hooks/useRequest";

import { TMerchant, TUserDetail } from "@/global";
import ApiUser from "@/api/users";
import useModal from "@/hooks/useModal";
import ModifyMerchant from "./components/ModifyMerchant.vue";

const { params } = useRoute();
const { data, refresh, onFetchResponse } = useRequest<{ merchant_detail: TMerchant }>(
  ApiMerchant.merchantDetail,
  { defaultParams: { id: +params.id } }
);

// 类别数据
const { map: categoryMap } = useCategory();

// 商户绑定的用户信息
const { data: userDetail, run: runUserDetail } = useRequest<TUserDetail>(
  ApiUser.userInfoDetail,
  {
    immediate: false,
  }
);

onFetchResponse(() =>
  runUserDetail({ id: data.value?.merchant_detail.user_id })
);

const [Modal, modalApi] = useModal({
  width: 600,
  title: "更新品牌信息",
  destroyOnClose: true,
});
</script>

<template>
  <div class="flex">
    <ElCard class="flex-none w-[300px]" header="联系人信息">
      <ElSkeleton v-if="!data" />

      <ByDescription v-else :column="1" align="right">
        <ByDescriptionItem label="姓名">
          {{ data.merchant_detail.contact_name }}
        </ByDescriptionItem>
        <ByDescriptionItem label="电话">
          {{ data.merchant_detail.contact_phone }}
        </ByDescriptionItem>
        <ByDescriptionItem label="微信">
          {{ data.merchant_detail.contact_wechat }}
        </ByDescriptionItem>
        <ByDescriptionItem label="职务">
          {{ data.merchant_detail.contact_position }}
        </ByDescriptionItem>
        <ByDescriptionItem label="邮箱">
          {{ data.merchant_detail.contact_email }}
        </ByDescriptionItem>
        <ByDescriptionItem label="备用联系人姓名">
          {{ data.merchant_detail.emergency_name }}
        </ByDescriptionItem>
        <ByDescriptionItem label="备用联系人电话">
          {{ data.merchant_detail.emergency_phone }}
        </ByDescriptionItem>
      </ByDescription>

      <div class="pt-3">
        <ElDivider>绑定人信息</ElDivider>
      </div>

      <ByDescription :column="1" align="right">
        <ByDescriptionItem label="头像">
          <ElImage
            v-if="userDetail?.avatar"
            class="w-120px"
            :src="userDetail?.avatar"
          />
          <span v-else>暂无头像</span>
        </ByDescriptionItem>

        <ByDescriptionItem label="昵称">
          {{ userDetail?.nickname }}
        </ByDescriptionItem>
        <ByDescriptionItem label="手机号">
          {{ userDetail?.mobile }}
        </ByDescriptionItem>
      </ByDescription>
    </ElCard>

    <ElCard header="" class="flex-auto ml-2">
      <template #header>
        <div class="flex justify-between items-center">
          <span>品牌信息</span>

          <div class="div">
            <ElButton type="primary" class="mr-3" plain @click="modalApi.open(data?.merchant_detail)">更新品牌信息</ElButton>

            <ElLink type="primary" :href="`/merchant/${params.id}/staff/list`"
              >职工列表>
            </ElLink>
          </div>
        </div>
      </template>

      <ElSkeleton v-if="!data" />

      <ByDescription
        v-else
        :column="2"
        label-width="6em"
        label-suffix="："
        label-align="right"
      >
        <ByDescriptionItem label="LOGO">
          <ElImage
            class="w-120px"
            :src="data.merchant_detail.merchant_logo_png"
            :preview-src-list="[data.merchant_detail.merchant_logo_png]"
          />

          <ElLink
            v-if="data.merchant_detail.merchant_logo_ai"
            class="ml-2 underline"
            download
            :href="data.merchant_detail.merchant_logo_ai"
          >
            下载Ai/PDF格式文件
          </ElLink>
        </ByDescriptionItem>

        <ByDescriptionItem label="品牌名" :span="2">
          {{ data.merchant_detail.merchant_title }}
        </ByDescriptionItem>

        <ByDescriptionItem label="类别">
          {{ categoryMap?.get(data.merchant_detail.merchant_type).title }}
        </ByDescriptionItem>

        <ByDescriptionItem label="门店数量">
          {{ data.merchant_detail.merchant_size }}
        </ByDescriptionItem>

        <ByDescriptionItem label="营业时间">
          {{ data.merchant_detail.merchant_time }}
        </ByDescriptionItem>

        <ByDescriptionItem label="所在地">
          {{ data.merchant_detail.province }}
          {{ data.merchant_detail.city }}
          {{ data.merchant_detail.district }}
          {{ data.merchant_detail.address }}
        </ByDescriptionItem>

        <ByDescriptionItem label="营业执照" :span="2">
          <ElImage
            class="w-120px"
            :src="data.merchant_detail.business_license"
            :preview-src-list="[data.merchant_detail.business_license]"
          />
        </ByDescriptionItem>

        <ByDescriptionItem label="门店图片" :span="2">
          <ElSpace v-if="data.merchant_detail.merchant_img">
            <ElImage
              v-for="(item, index) in splitImageStr(
                data.merchant_detail.merchant_img
              )"
              class="w-120px h-120px"
              :key="index"
              :src="item"
              :preview-src-list="
                splitImageStr(data.merchant_detail.merchant_img)
              "
            />
          </ElSpace>
        </ByDescriptionItem>

        <ByDescriptionItem label="产品图片" :span="2">
          <ElSpace v-if="data.merchant_detail.product_img">
            <ElImage
              v-for="(item, index) in splitImageStr(
                data.merchant_detail.product_img
              )"
              class="w-120px h-120px"
              :key="index"
              :src="item"
              :preview-src-list="
                splitImageStr(data.merchant_detail.product_img)
              "
            />
          </ElSpace>
        </ByDescriptionItem>

        <ByDescriptionItem label="品牌介绍" :span="2">
          <div v-html="data.merchant_detail.merchant_desc" />
        </ByDescriptionItem>
      </ByDescription>
    </ElCard>
  </div>

  <Modal>
    <ModifyMerchant @success="refresh" />
  </Modal>
</template>
